<template>
    <div style="position: relative">
        <el-form :inline="true" size="mini" label-position="right" :model="form">
            <el-form-item label="项目名称">
                <el-input clearable placeholder="请输入" v-model="form.projectName"></el-input>
            </el-form-item>
            <el-form-item label="项目编号">
                <el-input clearable placeholder="请输入" v-model="form.projectCode"></el-input>
            </el-form-item>
            <el-form-item label="任务状态">
                <el-select placeholder="请选择" clearable v-model="form.taskStatusName">
                    <el-option label="进行中" value="1"></el-option>
                    <el-option label="已完成" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select placeholder="请选择" clearable v-model="form.reviewStatusName">
                    <el-option label="待审批" value="1"></el-option>
                    <el-option label="审批驳回" value="2"></el-option>
                    <el-option label="审批通过" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                    <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期"
                    @change="selecttime" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="warning" class="el-button--reset" icon="el-icon-refresh-right" @click="resetFromdata" size="mini" ></el-button>
            </el-form-item>
        </el-form>
        <el-table size="mini" style="width: 100%" :data="tableData">
            <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
            <el-table-column align="center" label="项目编号" prop="projectCode"></el-table-column>
            <el-table-column align="center" label="项目名称" prop="projectName"></el-table-column>
            <el-table-column align="center" label="任务名称" prop="task"></el-table-column>
            <el-table-column align="center" label="任务状态" prop="taskStatusName"></el-table-column>
            <el-table-column align="center" label="审核状态" prop="reviewStatusName"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :current-page="pageNo"
              :page-size="page_size"
            ></el-pagination>
        </el-row>
        <div class="clueDetail">
            <el-dialog title="任务详情" :visible.sync="dialogTask" width="800px">
                <el-form
                :model="infoDetail"
                size="mini"
                label-position="right"
                >
                <el-row :gutter="20">
                    <el-col :span="24" class="clue-title" style="display: block">
                    项目基本信息
                    <span style="font-size: 14px; color: #aaaaaa; margin-left: 10px"
                        >项目编号 {{ infoDetail.projectCode }}</span
                    ></el-col
                    >
                    <el-col :span="12">
                    <el-form-item label="企业名称：">{{
                        infoDetail.customerName
                    }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="企业联系人：">
                        <span>{{ infoDetail.contacts }}</span>
                        <span style="margin-left: 10px">{{
                        infoDetail.telephone
                        }}</span>
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="业务类型：">{{
                        infoDetail.businessTypeNameList &&
                        infoDetail.businessTypeNameList.length > 0
                        ? infoDetail.businessTypeNameList.toString()
                        : ""
                    }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="所在地区：">{{
                        infoDetail.parentName ? infoDetail.parentName.join("") : ""
                    }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="预计合同金额：">
                        {{infoDetail.estimatedAmount}} {{infoDetail.units}}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="预计成交日期：">{{
                        infoDetail.estimatedDate
                    }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="项目概况：">{{
                        infoDetail.note
                    }}</el-form-item>
                    </el-col>
                </el-row>
                </el-form>
                <el-form
                :model="taskDetail"
                size="mini"
                label-position="right"
                label-width="110px"
                >
                <el-row :gutter="20">
                    <el-col :span="24" class="clue-title">任务详情</el-col>
                    <el-col :span="12">
                    <el-form-item label="任务名称：">
                        {{ taskDetail.task }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="任务说明：">
                        {{ taskDetail.planDescription }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="任务执行人：">
                        {{
                        taskDetail.executorName &&
                        taskDetail.executorName.join(",")
                        }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="是否需要盖章：">
                        {{ taskDetail.sealIsNo == 0 ? "否" : "是" }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="任务开始日期：">
                        {{ taskDetail.startTime }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="任务结束日期：">
                        {{ taskDetail.completionTime }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="12">
                    <el-form-item label="是否需要审核：">
                        {{ taskDetail.examine == 0 ? "否" : "是" }}
                    </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="taskDetail.examine == 1">
                    <el-form-item label="审批流：">
                        <approver2 :readonly="true" :approverList="taskDetail.approver" typeId="3"></approver2>
                    </el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="抄送：">
                        <approverRoleCc :approverList="taskDetail.roleCcList" :readonly="true" :isCc="true" :role="true"></approverRoleCc>
                        <approverUserCc :approverList="taskDetail.userCcList" :readonly="true" :isCc="true"></approverUserCc>
                    </el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="备注：">{{
                        taskDetail.remarks
                    }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                    <el-form-item label="附件：">
                        <Upload v-model="taskDetail.accessory" fielState="14" :id="taskDetail.id" readonly></Upload>
                    </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
// import approver from './components/approver';
// import approver1 from './components/approver1';
import { getType } from '@/utils';
import Upload from './components/Upload.vue';
import approver2 from './components/approver2';
import approverRoleCc from './components/approverRoleCc';
import approverUserCc from './components/approverUserCc';

export default {
  name: 'ProjectTask',
  components: {
    // approver,
    // approver1,
    Upload,
    approver2,
    approverRoleCc,
    approverUserCc
  },
  data () {
    return {
      // 任务详情
      infoDetail: {},
      taskDetail: {},
      times: '',
      form: {
        projectName: '',
        projectCode: '',
        taskStatusName: '',
        reviewStatusName: '',
        createTime1: '',
        createTimeEnd1: ''
      },
      page_size: 10,
      pageNo: 1,
      tableData: [],
      total: 0,
      dialogTask: false
    }
  },
  created () {
    this.getTaskList()
  },
  methods: {
    selecttime (times) {
      if (times) {
        this.form.createTime1 = times[0].toString();
        this.form.createTimeEnd1 = times[1].toString();
      } else {
        this.form.createTime1 = '';
        this.form.createTimeEnd1 = '';
      }
    },
    // 任务列表
    getTaskList () {
      let params = {
        ...this.form,
        size: this.page_size,
        current: this.pageNo
      };
      return new Promise((resolve, reject) => {
        Administration.Tasklist(this, params)
          .then((res) => {
            console.log(res)
            this.tableData = res?.data.records;
            this.total = res?.data.total;
            console.log(this.total)
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    // 分页导航
    handleSizeChange (val) {
      this.page_size = val;
      this.getTaskList();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.getTaskList();
    },
    // 搜索
    onSubmit () {
      this.pageNo = 1;
      this.getTaskList();
    },
    // 重置
    resetFromdata () {
      this.form = {
        projectName: null,
        projectCode: null,
        taskStatusName: null,
        reviewStatusName: null,
        createTime1: null,
        createTimeEnd1: null
      };
      this.times = '';
      this.pageNo = 1;
      this.page_size = 10;
    },
    // 任务详情
    handleDetail (row) {
      console.log(row);
      this.infoDetail = row.project || {} // 项目
      this.taskDetail = row.projectInitiationTask || {} // 任务
      let accessory = this.taskDetail?.accessoryList
      this.taskDetail.accessory = getType(accessory).isString ? JSON.parse(accessory) : accessory;
      this.dialogTask = true
    }
  }
}

</script>

<style lang="scss" scoped>
.clueDetail {
  position: relative;
  padding: 20px;
  /deep/.el-step__description {
    padding: 0 10px !important;
  }
  .project-status {
    font-size: 14px;
    font-weight: 500;
    color: #1188ff;
    margin: 0 10px;
    // text-decoration: underline;
  }
  .clue-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .del-disabled{
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: not-allowed;
    padding: 8px 16px;
    font-size: 12px;
    color:#C0C4CC;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
  }
  .clue-form {
    .clue-title {
      font-size: 16px;
    }
  }
  .line {
    width: 100%;
    height: 2px;
    background: rgba(242, 242, 242, 1);
    margin-bottom: 15px;
  }
  .relation-show {
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    color: #1188ff;
  }
  .dynamic {
    padding: 20px;
    border-radius: 8px;
    background: rgba(242, 242, 242, 0.3);
    .dynamic-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .avatar {
        width: 40px;
        height: 40px;
        border-radius: 40%;
        margin: 0 auto;
        display: block;
        margin-bottom: 6px;
      }
      .dynamic-content {
        min-height: 40px;
        margin-bottom: 6px;
      }
      .dynamic-time {
        color: #d7d7d7;
      }
    }
    .dynamic-release {
      margin-top: 50px;
    }
    .release-btn {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
